<template>
  <view class="address-edit-container">
    <view class="form-content">
      <!-- 已选择地址显示区域 -->
      <view class="selected-address-section" v-if="addressInfo.address">
        <view class="selected-address-header">
          <text class="address-label">当前选择的地址</text>
          <view class="change-address-btn" @click="toggleMapView">
            <text class="change-text">更改</text>
          </view>
        </view>
        <view class="selected-address-content">
          <view class="address-name" v-if="addressInfo.name">
            <text class="name-icon">📍</text>
            <text class="name-text">{{ addressInfo.name }}</text>
          </view>
          <text class="address-detail">{{ addressInfo.address }}</text>
        </view>
      </view>

      <!-- 原有的选择地址按钮 -->
      <view class="header" @click="toggleMapView" v-if="!addressInfo.address">
        <text class="page-title">选择收货地址</text>
        <view class="map-tools">
          <view class="tool-btn">
            <text class="tool-icon">🔍</text>
    </view>
          <view class="tool-btn">
            <text class="tool-icon">⊙</text>
    </view>
      </view>
    </view>

    <view class="form-box">
      <view class="form-item">
        <text class="label">门牌号</text>
        <input v-model="form.detail" class="input" placeholder="详细地址，例如1层101室1" />
      </view>

        <view class="form-item">
        <text class="label">标签</text>
          <view class="tag-list">
            <view 
              v-for="tag in tags" 
              :key="tag" 
              :class="['tag-item', form.tag === tag ? 'active-tag' : '']" 
              @click="form.tag = tag"
            >{{ tag }}</view>
          </view>
        </view>

      <view class="form-item">
        <text class="label">联系人</text>
        <input v-model="form.consignee" class="input" placeholder="请填写收货人的姓名" />
        <view class="gender-group">
            <view class="gender-option" @click="form.gender = 'male'">
              <view :class="['gender-radio', form.gender === 'male' ? 'active-radio' : '']">
                <view v-if="form.gender === 'male'" class="radio-inner"></view>
              </view>
              <text :class="['gender-text', form.gender === 'male' ? 'active-text' : '']">先生</text>
            </view>
            <view class="gender-option" @click="form.gender = 'female'">
              <view :class="['gender-radio', form.gender === 'female' ? 'active-radio' : '']">
                <view v-if="form.gender === 'female'" class="radio-inner"></view>
              </view>
              <text :class="['gender-text', form.gender === 'female' ? 'active-text' : '']">女士</text>
            </view>
          </view>
        </view>

      <view class="form-item">
        <text class="label">手机号</text>
        <input v-model="form.phone" class="input" placeholder="请填写收货手机号" type="number" />
      </view>

        <view class="form-item">
          <view class="default-address-toggle">
            <text class="default-label">设为默认收货地址</text>
            <switch :checked="form.isDefault === 1" color="#ffcc00" @change="toggleDefault" />
          </view>
        </view>

        <view class="footer">
          <button class="submit-btn" @click="onSubmit">保存地址</button>
        </view>
      </view>
    </view>

    <!-- 地图选择页面 -->
    <view v-if="showMap" class="map-container">
      <view class="map-header">
        <view class="nav-back-btn" @click="goBack">
          <text class="back-icon">&#xe600;</text>
        </view>
        <view class="nav-title">选择位置</view>
      </view>

      <view class="city-search-bar">
        <view class="city-selector">
          <text>南宁</text>
          <text class="arrow-down">▼</text>
        </view>
        <view class="search-box">
          <input class="search-input" v-model="searchKeyword" placeholder="请输入您的收货地址" @input="onSearchInput" />
        </view>
      </view>

      <map
        id="map"
        :latitude="center.latitude"
        :longitude="center.longitude"
        :markers="markers"
        scale="16"
        class="location-map"
        @regionchange="onRegionChange"
        @tap="onMapTap"
        @error="onMapError"
        show-location
      />
      <!-- 地图加载错误提示 -->
      <view class="map-error-overlay" v-if="mapLoadError">
        <view class="error-content">
          <view class="error-icon">⚠️</view>
          <view class="error-text">地图加载失败</view>
          <view class="error-subtext">请检查网络连接或位置权限</view>
          <button class="retry-btn" @click="retryLoadMap">重试加载</button>
        </view>
      </view>
      <!-- 静态地图作为备选 -->
      <image v-if="staticMapUrl" :src="staticMapUrl" mode="aspectFill" class="static-map" />
      <view class="center-pin" v-if="!mapLoadError"></view>

      <!-- 当前位置信息卡片 -->
      <view class="location-card">
        <text class="location-name">{{ currentLocationInfo.name || '未选择位置' }}</text>
        <text class="location-address">{{ currentLocationInfo.address || '' }}</text>
        <button v-if="currentLocationInfo.address" class="confirm-location-btn" @click="confirmCurrentLocation">
          选择此位置
        </button>
      </view>

      <!-- POI搜索结果列表 -->
      <view class="poi-list" v-if="poiList.length > 0">
        <view v-for="(poi, idx) in poiList" :key="poi.id || idx" class="poi-item" @click="selectPoi(poi)">
          <view class="poi-item-inner">
            <view class="poi-name">{{ poi.title || poi.name }}</view>
            <view class="poi-address">{{ poi.address }}</view>
            <view class="poi-select">
              <text class="select-text">选择</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, watch, onMounted, nextTick } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { addressApi } from '@/api/address.js';
// 导入地图服务工具
import mapService, { MOCK_ADDRESS_DATA } from '@/utils/mapService.js';
import common from '@/utils/common.js';

const id = ref(null);
const tags = ['家', '公司', '学校'];
const genders = [
  { label: '先生', value: 'male' },
  { label: '女士', value: 'female' }
];
const form = ref({
  latitude: 39.909,
  longitude: 116.397,
  detail: '',
  tag: '家',
  consignee: '',
  gender: 'male',
  phone: '',
  province: '',
  city: '',
  district: '',
  isDefault: 0
});

// 初始化中心坐标，设置默认值防止无法获取位置时出错
const center = ref({ 
  latitude: 22.817, // 南宁市默认坐标
  longitude: 108.366
});

// 分离两个地址信息：当前选中的和地图上的
const addressInfo = ref({ address: '', name: '' }); // 最终选中的地址
const currentLocationInfo = ref({ address: '', name: '' }); // 地图上当前位置的地址

const poiList = ref([]);
const searchKeyword = ref('');
const showMap = ref(false);
const locationError = ref(false);
const mapLoadError = ref(false);
const staticMapUrl = ref('');

// 设置页面标题
const setPageTitle = () => {
  uni.setNavigationBarTitle({
    title: id.value ? '编辑收货地址' : '新增收货地址'
  });
};

const markers = computed(() => [{
  id: 1,
  latitude: center.value.latitude,
  longitude: center.value.longitude,
  width: 32,
  height: 32,
  iconPath: '/static/images/location.png'
}]);

const goBack = () => {
  if (showMap.value) {
    showMap.value = false;
  } else {
  uni.navigateBack();
  }
};

// 切换到地图选择视图
const toggleMapView = () => {
  console.log('切换到地图视图');
  showMap.value = true;
  
  // 如果之前没获取到位置，再尝试一次
  if (locationError.value || !currentLocationInfo.value.address) {
    getLocation();
  }
};

// 使用mapService获取位置
const getLocation = () => {
  // 使用mapService获取当前位置
  mapService.getCurrentLocation()
    .then(location => {
      center.value.latitude = location.latitude;
      center.value.longitude = location.longitude;
      locationError.value = false;
      
      // 使用mapService的逆地址解析
      reverseGeocode(location.latitude, location.longitude);
      
      // 如果是默认位置，显示提示
      if (location.isDefault) {
        uni.showToast({
          title: '使用默认位置，请检查定位权限',
          icon: 'none',
          duration: 2000
        });
      }
    });
};

const onRegionChange = (e) => {
  if (e.type === 'end') {
    // 获取地图中心点坐标
    const mapCtx = uni.createMapContext('map');
    mapCtx.getCenterLocation({
      success: (res) => {
        center.value.latitude = res.latitude;
        center.value.longitude = res.longitude;
        reverseGeocode(res.latitude, res.longitude);
      },
      fail: (err) => {
        console.error('获取地图中心点坐标失败:', err);
      }
    });
  }
};

const onMapTap = (e) => {
  // 可选：点击地图时也可逆地址解析
  if (e.detail && e.detail.latitude && e.detail.longitude) {
    center.value.latitude = e.detail.latitude;
    center.value.longitude = e.detail.longitude;
    reverseGeocode(e.detail.latitude, e.detail.longitude);
  }
};

/**
 * 使用mapService进行逆地址解析
 */
const reverseGeocode = (lat, lng) => {
  // 使用mapService的逆地址解析，会自动处理错误和降级
  mapService.reverseGeocode(lat, lng)
    .then(result => {
      // 更新当前位置信息
      currentLocationInfo.value = {
        address: result.address,
        name: result.name
      };
      
      // 更新POI列表
      poiList.value = result.pois || [];
    })
    .catch(err => {
      console.error('逆地址解析失败:', err);
      uni.showToast({
        title: err.message || '获取地址信息失败',
        icon: 'none'
      });
    });
};

const onSearchInput = (e) => {
  if (!searchKeyword.value) {
    poiList.value = [];
    return;
  }
  
  // 使用mapService进行POI搜索
  mapService.searchPOI(searchKeyword.value)
    .then(results => {
      poiList.value = results;
    })
    .catch(err => {
      console.error('搜索位置失败:', err);
      uni.showToast({
        title: err.message || '搜索位置失败',
        icon: 'none'
      });
    });
};

// 修复后的selectPoi函数
const selectPoi = (poi) => {
  console.log('选择POI:', poi);
  
  // 适配不同格式的返回结果
  const lat = poi.location ? poi.location.lat : poi.latitude;
  const lng = poi.location ? poi.location.lng : poi.longitude;
  
  // 1. 更新地图中心点
  center.value.latitude = lat;
  center.value.longitude = lng;
  
  // 2. 更新最终选中的地址信息
  addressInfo.value = { 
    address: poi.address, 
    name: poi.title || poi.name 
  };
  
  // 3. 更新表单数据
  form.value.latitude = lat;
  form.value.longitude = lng;
  
  // 4. 尝试解析地址
  const addressParts = parseAddress(poi.address);
  form.value.province = addressParts.province;
  form.value.city = addressParts.city;
  form.value.district = addressParts.district;
  
  // 5. 清理搜索状态
  searchKeyword.value = '';
  poiList.value = [];
  
  // 6. 使用nextTick确保数据更新后再关闭地图
  nextTick(() => {
    showMap.value = false;
    
    // 7. 给用户反馈
    uni.showToast({
      title: '地址选择成功',
      icon: 'success',
      duration: 1500
    });
    
    console.log('地址选择完成:', addressInfo.value);
  });
};

// 新增：确认当前位置
const confirmCurrentLocation = () => {
  console.log('确认当前位置:', currentLocationInfo.value);
  
  // 将当前位置设为选中的地址
  addressInfo.value = {
    address: currentLocationInfo.value.address,
    name: currentLocationInfo.value.name
  };
  
  // 更新表单数据
  form.value.latitude = center.value.latitude;
  form.value.longitude = center.value.longitude;
  
  // 尝试解析地址
  const addressParts = parseAddress(currentLocationInfo.value.address);
  form.value.province = addressParts.province;
  form.value.city = addressParts.city;
  form.value.district = addressParts.district;
  
  // 关闭地图
  nextTick(() => {
    showMap.value = false;
    
    uni.showToast({
      title: '位置确认成功',
      icon: 'success',
      duration: 1500
    });
    
    console.log('位置确认完成:', addressInfo.value);
  });
};

// 添加监听器确保数据同步
watch(addressInfo, (newVal) => {
  console.log('最终选中的地址信息更新:', newVal);
}, { deep: true });

watch(currentLocationInfo, (newVal) => {
  console.log('当前地图位置信息更新:', newVal);
}, { deep: true });

onLoad(async (options) => {
  // 初始化加载数据
  id.value = options.id;
  
  // 设置页面标题
  setPageTitle();
  
  if (options.id) {
    // 获取编辑的地址信息
    try {
    const res = await addressApi.getAddressById(id.value);
    if (res.data) {
        // 将后端数据映射到表单
        form.value = {
          latitude: res.data.latitude,
          longitude: res.data.longitude,
          detail: res.data.detailAddress || res.data.detail || '',
          tag: res.data.label || '家',
          consignee: res.data.recipientName || res.data.recipient || '',
          gender: 'male', // 后端可能没有性别字段，设置默认值
          phone: res.data.recipientPhone || res.data.phone || '',
          province: res.data.province || '',
          city: res.data.city || '',
          district: res.data.district || '',
          isDefault: res.data.isDefault || 0
        };
        
        // 设置地图中心点
        center.value.latitude = res.data.latitude || center.value.latitude;
        center.value.longitude = res.data.longitude || center.value.longitude;
        
        // 使用通用格式化函数设置地址信息
        addressInfo.value = {
          address: common.formatAddress(res.data),
          name: res.data.label || '已保存地址'
        };
      }
    } catch (error) {
      console.error('获取地址信息失败:', error);
      uni.showToast({ 
        title: '获取地址信息失败', 
        icon: 'none' 
      });
    }
  } else {
    // 新增地址时尝试获取当前位置
    getLocation();
  }
});

onShow(() => {
  // 页面显示时重新设置标题，确保标题正确
  setPageTitle();
});

const onSubmit = async () => {
  // 验证必填项
  if (!addressInfo.value.address) {
    uni.showToast({ title: '请先选择地址', icon: 'none' });
    return;
  }
  
  if (!form.value.detail || !form.value.consignee || !form.value.phone) {
    uni.showToast({ title: '请填写完整信息', icon: 'none' });
    return;
  }
  
  try {
    // 从地址解析出省市区信息
    const addressParts = parseAddress(addressInfo.value.address);
    
    // 构建API所需的数据结构
    const apiData = {
      recipient: form.value.consignee,
      phone: form.value.phone,
      province: addressParts.province || form.value.province || '',
      city: addressParts.city || form.value.city || '',
      district: addressParts.district || form.value.district || '',
      detail: form.value.detail,
      latitude: form.value.latitude,
      longitude: form.value.longitude,
      label: form.value.tag,
      isDefault: form.value.isDefault || 0
    };
    
    console.log('提交的地址数据:', apiData);
    
  if (id.value) {
      // 编辑地址
      apiData.id = parseInt(id.value);
      await addressApi.updateAddress(id.value, apiData);
    uni.showToast({ title: '修改成功', icon: 'success' });
  } else {
      // 新增地址
      await addressApi.addAddress(apiData);
    uni.showToast({ title: '添加成功', icon: 'success' });
  }
    
    setTimeout(() => {
      uni.navigateBack();
    }, 500);
  } catch (error) {
    console.error('保存地址失败:', error);
    uni.showToast({ title: '保存失败，请重试', icon: 'none' });
  }
};

// 解析地址字符串，提取省市区信息
const parseAddress = (address) => {
  const result = {
    province: '',
    city: '',
    district: ''
  };
  
  if (!address) return result;
  
  // 常见的省级行政区
  const provinces = ['北京市', '上海市', '天津市', '重庆市', '河北省', '山西省', '辽宁省', 
    '吉林省', '黑龙江省', '江苏省', '浙江省', '安徽省', '福建省', '江西省', '山东省', 
    '河南省', '湖北省', '湖南省', '广东省', '海南省', '四川省', '贵州省', '云南省', 
    '陕西省', '甘肃省', '青海省', '台湾省', '内蒙古自治区', '广西壮族自治区', 
    '西藏自治区', '宁夏回族自治区', '新疆维吾尔自治区', '香港特别行政区', '澳门特别行政区'];
  
  // 尝试匹配省份
  for (const province of provinces) {
    if (address.includes(province)) {
      result.province = province;
      
      // 从地址中移除省份，避免重复
      let remainingAddress = address.replace(province, '');
      
      // 如果是直辖市，省市相同
      if (['北京市', '上海市', '天津市', '重庆市'].includes(province)) {
        result.city = province;
        
        // 尝试从剩余地址中提取区级信息
        const districtMatch = remainingAddress.match(/(.+?区|.+?县|.+?旗)/);
        if (districtMatch && districtMatch.length > 0) {
          result.district = districtMatch[0];
        }
      } else {
        // 尝试从剩余地址中提取市级信息
        const cityMatch = remainingAddress.match(/(.+?市)/);
        if (cityMatch && cityMatch.length > 0) {
          result.city = cityMatch[0];
          
          // 从剩余地址中移除市级信息
          remainingAddress = remainingAddress.replace(cityMatch[0], '');
          
          // 尝试从剩余地址中提取区级信息
          const districtMatch = remainingAddress.match(/(.+?区|.+?县|.+?旗)/);
          if (districtMatch && districtMatch.length > 0) {
            result.district = districtMatch[0];
          }
        }
      }
      
      break;
    }
  }
  
  return result;
};

const onMapError = (e) => {
  console.error('地图加载失败:', e);
  mapLoadError.value = true;
  
  // 尝试预加载瓦片以减少加载错误
  mapService.preloadMapTiles(center.value.latitude, center.value.longitude);
  
  // 使用静态地图作为备选方案
  const mapCtx = uni.createMapContext('map');
  
  // 如果支持静态地图
  if (mapCtx && typeof mapCtx.includePoints === 'function') {
    try {
      // 创建一个静态图片作为覆盖层
      const mapUrl = mapService.getStaticMapUrl(
        center.value.latitude,
        center.value.longitude,
        { width: 800, height: 400 }
      );
      
      // 可以在这里展示静态地图，例如创建一个图片元素
      console.log('使用静态地图:', mapUrl);
      
      // 这里可以设置静态地图URL到页面上的某个元素
      staticMapUrl.value = mapUrl;
    } catch (err) {
      console.error('创建静态地图失败:', err);
    }
  }
};

const retryLoadMap = () => {
  console.log('重试加载地图');
  mapLoadError.value = false;
  staticMapUrl.value = '';
  
  // 延迟一下再尝试加载
  setTimeout(() => {
    getLocation();
  }, 500);
};

const toggleDefault = () => {
  form.value.isDefault = form.value.isDefault === 1 ? 0 : 1;
};
</script>

<style scoped>
.address-edit-container {
  min-height: 100vh;
  background-color: #f7f7f7;
}

/* 新增：已选择地址显示区域样式 */
.selected-address-section {
  background-color: #ffffff;
  margin-bottom: 20rpx;
}

.selected-address-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1px solid #f5f5f5;
}

.address-label {
  font-size: 32rpx;
  font-weight: 500;
  color: #333333;
}

.change-address-btn {
  padding: 10rpx 20rpx;
  background-color: #ffcc00;
  border-radius: 20rpx;
}

.change-text {
  font-size: 28rpx;
  color: #333333;
}

.selected-address-content {
  padding: 30rpx;
}

.address-name {
  display: flex;
  align-items: center;
  margin-bottom: 15rpx;
}

.name-icon {
  font-size: 32rpx;
  margin-right: 15rpx;
}

.name-text {
  font-size: 32rpx;
  font-weight: 500;
  color: #333333;
}

.address-detail {
  font-size: 28rpx;
  color: #666666;
  line-height: 1.5;
  display: block;
}

/* 表单页面样式 */
.form-content {
  padding: 0;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #ffffff;
  position: relative;
}

/* 添加点击效果 */
.header::after {
  content: '';
  position: absolute;
  right: 30rpx;
  top: 50%;
  transform: translateY(-50%);
  width: 16rpx;
  height: 16rpx;
  border-top: 2rpx solid #ffcc00;
  border-right: 2rpx solid #ffcc00;
  transform: translateY(-50%) rotate(45deg);
}

.header:active {
  background-color: #f9f9f9;
}

.page-title {
  font-size: 36rpx;
  color: #ffcc00;
  font-weight: 500;
}

.map-tools {
  display: flex;
}

.tool-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 20rpx;
}

.tool-icon {
  font-size: 34rpx;
  color: #333;
}

.form-box {
  background-color: #ffffff;
  padding: 0 30rpx;
}

.form-item {
  padding: 30rpx 0;
  border-bottom: 1px solid #f5f5f5;
}

.form-item:last-child {
  border-bottom: none;
}

.label {
  font-size: 32rpx;
  color: #333333;
  margin-bottom: 20rpx;
  display: block;
}

.input {
  font-size: 32rpx;
  width: 100%;
  height: 70rpx;
  padding: 0 10rpx;
}

.tag-list {
  display: flex;
  margin-top: 20rpx;
}

.tag-item {
  padding: 16rpx 48rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
  margin-right: 20rpx;
  background-color: #f5f5f5;
  color: #333333;
}

.active-tag {
  background-color: #fffaf0;
  color: #ffcc00;
  border: 1px solid #ffcc00;
}

.gender-group {
  display: flex;
  margin-top: 20rpx;
}

.gender-option {
  display: flex;
  align-items: center;
  margin-right: 60rpx;
}

.gender-radio {
  width: 44rpx;
  height: 44rpx;
  border-radius: 50%;
  border: 1px solid #dddddd;
  display: flex;
  align-items: center;
  justify-content: center;
}

.radio-inner {
  width: 28rpx;
  height: 28rpx;
  border-radius: 50%;
  background-color: #ffcc00;
}

.active-radio {
  border-color: #ffcc00;
}

.gender-text {
  margin-left: 12rpx;
  font-size: 32rpx;
  color: #333333;
}

.active-text {
  color: #ffcc00;
}

.footer {
  padding: 40rpx 30rpx;
}

.submit-btn {
  width: 100%;
  height: 100rpx;
  background-color: #ffcc00;
  color: #333333;
  font-size: 36rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50rpx;
  font-weight: 500;
}

/* 地图页面样式 */
.map-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 100;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
}

.map-header {
  display: flex;
  align-items: center;
  height: 88rpx;
  padding: 0 30rpx;
  background-color: #ffffff;
  position: relative;
  z-index: 10;
}

.nav-back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  font-size: 36rpx;
  font-family: 'iconfont';
  color: #333;
}

.nav-title {
  flex: 1;
  text-align: center;
  font-size: 32rpx;
  font-weight: 500;
}

.city-search-bar {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  padding: 20rpx;
  margin: 0;
}

.city-selector {
  display: flex;
  align-items: center;
  margin-right: 20rpx;
  font-size: 28rpx;
  color: #333;
}

.arrow-down {
  font-size: 20rpx;
  margin-left: 6rpx;
  color: #999;
}

.search-box {
  flex: 1;
  background-color: #f5f5f5;
  border-radius: 36rpx;
  padding: 0 20rpx;
  height: 68rpx;
  display: flex;
  align-items: center;
}

.search-input {
  width: 100%;
  height: 100%;
  font-size: 28rpx;
}

.location-map {
  flex: 1;
  width: 100%;
  height: 500rpx;
  position: relative;
  background-color: #f2f2f2; /* 添加背景色作为地图加载失败时的显示 */
}

.center-pin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%);
  width: 40rpx;
  height: 40rpx;
  background-image: url('/static/images/location.png');
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 10;
}

.location-card {
  background-color: #ffffff;
  padding: 30rpx;
  border-radius: 16rpx 16rpx 0 0;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.location-name {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}

.location-address {
  font-size: 26rpx;
  color: #666;
  display: block;
  margin-bottom: 20rpx; /* 添加下边距为按钮腾出空间 */
}

/* 添加确认位置按钮的样式 */
.confirm-location-btn {
  width: 100%;
  height: 80rpx;
  background-color: #ffcc00;
  color: #333;
  font-size: 30rpx;
  border-radius: 40rpx;
  margin-top: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}

.poi-list {
  flex: 1;
  background-color: #ffffff;
  overflow-y: auto;
  max-height: 50vh; /* 限制列表高度为视口的一半 */
}

.poi-item {
  position: relative;
  padding: 0 30rpx;
}

.poi-item:active {
  background-color: #f9f9f9; /* 点击效果 */
}

.poi-item-inner {
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
  display: flex;
  flex-direction: column;
  position: relative; /* 添加相对定位 */
  padding-right: 100rpx; /* 为选择按钮留出空间 */
}

.poi-name {
  font-size: 30rpx;
  color: #333;
  margin-bottom: 10rpx;
  font-weight: 500; /* 加粗显示 */
}

.poi-address {
  font-size: 26rpx;
  color: #999;
  word-break: break-all; /* 允许在任意字符间换行 */
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 最多显示两行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.poi-select {
  position: absolute;
  right: 30rpx;
  top: 50%;
  transform: translateY(-50%);
  background-color: #ffcc00;
  padding: 8rpx 20rpx;
  border-radius: 30rpx;
}

.select-text {
  color: #333;
  font-size: 24rpx;
  font-weight: 500;
}

/* 地图加载错误提示样式 */
.map-error-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.error-content {
  background-color: #ffffff;
  padding: 40rpx;
  border-radius: 16rpx;
  text-align: center;
}

.error-icon {
  font-size: 48rpx;
  color: #ffcc00;
  margin-bottom: 20rpx;
}

.error-text {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.error-subtext {
  font-size: 28rpx;
  color: #666;
}

.retry-btn {
  width: 100%;
  height: 80rpx;
  background-color: #ffcc00;
  color: #333;
  font-size: 30rpx;
  border-radius: 40rpx;
  margin-top: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}

/* 静态地图样式 */
.static-map {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

.active-text {
  color: #ffcc00;
}

.default-address-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.default-label {
  font-size: 32rpx;
  color: #333333;
}
</style> 